<script setup lang="ts">
import "@/assets/css/chat/styles.css";
import { ref, reactive, onMounted, nextTick } from "vue";
import { postMessage,postWorkflow } from "@/api/dify";
import { useDarkMode } from "@/hooks/useToggleDarkMode";

// 消息对象类型定义
interface Message {
  id: number; // 消息ID
  content: string; // 消息内容
  isSelf: boolean; // 是否是用户自己发送的消息
  timestamp: string; // 消息发送时间
  avatar: string; // 用户头像
  suggestedQuestions?: string[]; // 新增建议问题字段
}

// 用户信息
const userData = {
  id: 3,
  password: "123456",
  realName: "youyou",
  email: "123456@163.com",
  roles: ["user"],
  username: "youyou",
  icon: "/public/favicon.ico",
  difyTab: [
    {
      dify: "珠宝行业资讯-店长老板通用版1.0",
      apiKey: "app-QJIJ4EEoOzuyCTxgcVxD7GWE",
      desc: "",
      icon: ""
    },
    {
      dify: "珠宝门店智能顾问--元元",
      apiKey: "app-ZlIIGv3jIZkqKJKtscpEYO2X",
      desc: "",
      icon: ""
    },
    {
      dify: "超级AI",
      apiKey: "app-yNIdZDVzTn8CO4ujIcTQodK1",
      desc: "",
      icon: ""
    },
    {
      dify: "珠宝门店高毛利产品助理",
      apiKey: "app-5YiLhQuo76Zkf0kq0LYYx2CQ",
      icon: ""
    }
  ]
};

// 对方用户信息，使用 reactive 创建响应式对象
const otherUser = reactive({
  username: "元元", // 对方用户名
  icon: "/public/favicon.ico" // 头像路径
});

// 应用参数，设置对话开场白和建议问题
// 从 localStorage 获取应用参数信息，记得解析为对象
const parameters = JSON.parse(localStorage.getItem("parameters") || "{}");
// const parameters = reactive({
//   opening_statement:
//     "您好，我是元元，您的专属珠宝门店智能顾问。我随时为您提供专业而贴心的服务，帮助您解决各种门店运营问题。请问今天有什么我可以帮到您的吗？",
//   suggested_questions: ["2024年最新珠宝资讯", "2025年最新珠宝资讯"],
//   apiKey: "app-ZlIIGv3jIZkqKJKtscpEYO2X"
// });

// 消息列表
const messages = ref<Message[]>([]);
// 新输入的消息
const newMessage = ref("");
// 消息容器的 DOM 引用
const messageContainer = ref<HTMLElement | null>(null);

// 在组件挂载后，初始化第一条消息
onMounted(() => {
  if (parameters.opening_statement) {
    const message: Message = {
      id: Date.now(),
      content: parameters.opening_statement,
      isSelf: false,
      timestamp: new Date().toLocaleTimeString(),
      avatar: otherUser.icon,
      suggestedQuestions: parameters.suggested_questions // 添加建议问题
    };
    messages.value.push(message);
    scrollToBottom();
  }
});

// 新增建议问题处理方法
const sendSuggestedQuestion = (question: string) => {
  addMessage(question, true);
  newMessage.value = ""; // 清空输入框
};

// 添加消息到消息列表
const addMessage = async (content: string, isSelf: boolean) => {
  const message: Message = {
    id: Date.now(), // 使用当前时间戳作为消息ID
    content, // 消息内容
    isSelf, // 是否是自己发送的消息
    timestamp: new Date().toLocaleTimeString(), // 当前时间戳
    avatar: isSelf ? userData.icon : otherUser.icon // 根据消息是否是自己发送来选择头像
  };
  messages.value.push(message); // 将消息添加到消息列表
  if (isSelf) {
    // 在用户消息发送后插入"思考中"的占位符消息
    const thinkingMessage: Message = {
      id: Date.now() + 1, // 创建一个新的ID
      content: "思考中...", // 占位符消息
      isSelf: false, // 标记为对方消息
      timestamp: new Date().toLocaleTimeString(),
      avatar: otherUser.icon
    };
    messages.value.push(thinkingMessage);
    scrollToBottom(); // 滚动到消息底部
    // 获取真实的响应消息
    const response = await postMessage(parameters.apiKey, content);
    // 找到刚刚插入的"思考中..."消息，并替换为真实的响应
    messages.value = messages.value.map(msg => {
      if (msg.content === "思考中..." && msg.isSelf === false) {
        return { ...msg, content: response }; // 替换为响应消息
      }
      return msg;
    });
  }
  scrollToBottom(); // 滚动到消息底部
};

// 发送消息的方法
const sendMessage = () => {
  if (newMessage.value.trim()) {
    // 如果消息不为空
    addMessage(newMessage.value.trim(), true); // 添加当前消息，标记为自己发送的
    newMessage.value = ""; // 清空输入框
  }
};

// 滚动到聊天框底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTo({
        top: messageContainer.value.scrollHeight, // 滚动到最底部
        behavior: "smooth" // 平滑滚动
      });
    }
  });
};
</script>

<template>
  <div class="chat-container" :class="{ dark: useDarkMode() }">
    <!-- 消息容器 -->
    <div ref="messageContainer" class="messages">
      <div
        v-for="message in messages"
        :key="message.id"
        class="message-item"
        :class="{ 'self-message': message.isSelf }"
      >
        <img :src="message.avatar" class="avatar" alt="avatar" />
        <div class="message-content">
          <div
            class="bubble"
            :class="{ 'self-bubble': message.isSelf, dark: useDarkMode() }"
          >
            {{ message.content }}
            <!-- 建议问题按钮组 -->
            <div v-if="message.suggestedQuestions" class="suggested-questions">
              <button
                v-for="(question, index) in message.suggestedQuestions"
                :key="index"
                @click="sendSuggestedQuestion(question)"
                :class="{ dark: useDarkMode() }"
                class="suggested-question"
              >
                {{ question }}
              </button>
            </div>
          </div>
          <div class="timestamp" :class="{ 'self-timestamp': message.isSelf }">
            {{ message.timestamp }}
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area" :class="{ dark: useDarkMode() }">
      <input
        v-model="newMessage"
        @keyup.enter="sendMessage"
        placeholder="输入消息..."
        class="message-input"
        :class="{ dark: useDarkMode() }"
      />
      <button
        @click="sendMessage"
        :class="{ dark: useDarkMode() }"
        class="send-button"
      >
        发送
      </button>
      <!-- 发送按钮 -->
    </div>
  </div>
</template>

<style scoped>
</style>
